<template>
  <el-row :gutter="10">
    <el-col :span="6">
      <div class="statistic">
        <div style="width: 70%;">
          <div class="title">文章数</div>
          <div class="value">{{ showData.articleCount }}</div>
        </div>
        <div class="icon">
          <el-icon color="Tomato" size="3em">
            <Document/>
          </el-icon>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="statistic">
        <div style="width: 70%;">
          <div class="title">分类数</div>
          <div class="value">{{ showData.categoryCount }}</div>
        </div>
        <div class="icon">
          <el-icon color="MediumSeaGreen" size="3em">
            <Files/>
          </el-icon>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="statistic">
        <div style="width: 70%;">
          <div class="title">标签数</div>
          <div class="value">{{ showData.tagCount }}</div>
        </div>
        <div class="icon">
          <el-icon color="DodgerBlue" size="3em">
            <Discount/>
          </el-icon>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="statistic">
        <div style="width: 70%;">
          <div class="title">总阅读量</div>
          <div class="value">{{ showData.viewCount }}</div>
        </div>
        <div class="icon">
          <el-icon color="Orange" size="3em">
            <View/>
          </el-icon>
        </div>
      </div>
    </el-col>
  </el-row>

  <!-- 第二行数据展示 -->

  <el-row :gutter="10" style="margin-top: 20px">
    <el-col :span="8">
      <PieChart title="文章分类统计" :show-data="showData.categoryPieData"></PieChart>
    </el-col>
    <el-col :span="8">
      <PieChart title="文章标签统计" :show-data="showData.tagPieData"></PieChart>
    </el-col>
    <el-col :span="8">
      <div class="article-rank">
        <div class="title">文章浏览量排行</div>
        <div style="padding: 10px 20px">
          <template v-for="item in showData.viewsRankTop10" :key="item.blogId">
            <div class="rank-list-item">
              <el-link :href="'/admin/editBlog/'+item.blogId">{{ item.blogTitle }}</el-link>
              <span style="float: right">{{ item.blogViews }}</span>
            </div>
          </template>
        </div>
      </div>
    </el-col>
  </el-row>

  <!-- 文章贡献度图表 -->

</template>

<script>
import PieChart from "@/components/admin/charts/PieChart.vue";
import Article from "@/components/blog/Article.vue";

export default {
  name: "Index",
  components: {Article, PieChart},
  data() {
    return {
      showData: {
        articleCount: 0,
        viewCount: 0,
        categoryCount: 0,
        tagCount: 0,
        categoryPieData: [
          {value: 0, name: '示例'},
        ],
        tagPieData: [
          {value: 0, name: '示例'},
        ],
        viewsRankTop10: [
          {blogTitle: '示例', id: '1', blogViews: 0},
        ]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      let {data: result} = await this.$http.get("/api/index/getShowData")
      // console.log(result)
      this.showData = result.dataMap
    },
  }
}
</script>

<style scoped>
.statistic {
  display: flex;
  width: 100%;
  padding: 20px;
  text-align: left;
  border: 1px solid #eeeeee;
  box-shadow: rgba(123, 123, 129, 0.2) 0px 7px 20px 0px;
}

.statistic .icon {
  flex: 1;
  text-align: center;
  margin-top: 15px
}

.title {
  color: #555f5b;
  font-size: 1em;
  margin-bottom: 10px;
}

.value {
  color: #071815;
  font-size: 1.8em;
}

.article-rank {
  height: 400px;
  padding: 15px 0px;
  border: 1px solid #eeeeee;
  box-shadow: rgba(123, 123, 129, 0.2) 0px 7px 20px 0px;
}

.article-rank .title {
  text-align: center;
  align-items: center;
  color: #1091D0;
  font-size: 1.3em;
}

.article-rank .rank-list-item {
  margin: 6px;
}
</style>